<template>
  <div id='app'>
    <div class="header2">
      <span>昵称:{{$route.query.user}}</span>
      <span>许愿墙</span>
    </div>
    <input type="text" placeholder="请输入你的心愿" class="in" v-model="text">
<ul class="uu">
  <li class="li" @click="pa1" :class="{dp:show1}" ></li>
  <li class="li" @click="pa2" :class="{dp:show2}"></li>
  <li class="li" @click="pa3" :class="{dp:show3}"></li>
  <li class="li" @click="pa4" :class="{dp:show4}"></li>
  <li class="li" @click="pa5" :class="{dp:show5}"></li>
</ul>
<div class="butt">
<van-button size="small" type="info" class="bu2" v-show="!fel" @click="xy">许愿</van-button>
  <van-button size="small" disabled  type="info" class="bu2" v-show="fel">再想想</van-button>
</div>

<ul>
  <li v-for="(c,i) in list1" @mouseup="wz1" :key="i" v-show="c.fel=='show1'" class="ll1" v-drag>{{c.text}} <span @click="remove1(i)">x</span></li>
  
</ul>
<ul>
  <li v-for="(c,f) in list2" @mouseup="wz2" :key="f" v-show="c.fel=='show2'" class="ll2" v-drag>{{c.text}} <span @click="remove2(f)">x</span></li>

</ul>
<ul>
    <li v-for="(c,e) in list3"  @mouseup="wz3" :key="e" v-show="c.fel=='show3'" class="ll3" v-drag>{{c.text}} <span @click="remove3(e)">x</span></li>

</ul>
<ul>
    <li v-for="(c,h) in list4" @mouseup="wz4" :key="h" v-show="c.fel=='show4'" class="ll4" v-drag>{{c.text}} <span @click="remove4(h)">x</span></li>

</ul>
<ul>  <li v-for="(c,p) in list5" @mouseup="wz5" :key="p" v-show="c.fel=='show5'" class="ll5" v-drag>{{c.text}} <span @click="remove5(p)">x</span></li></ul>
      

  </div>
</template>

<script>
export default {
  data () {
    return {
      list1: 
        JSON.parse(localStorage.getItem('list1'))|| [],
        list2: 
        JSON.parse(localStorage.getItem('list2'))|| [],
        list3: 
        JSON.parse(localStorage.getItem('list3'))|| [],
        list4: 
        JSON.parse(localStorage.getItem('list4'))|| [],
        list5: 
        JSON.parse(localStorage.getItem('list5'))|| [],
       
      fel:true,
      text:'',
      show1:false,
      show2:false,
      show3:false,
      show4:false,
      show5:false,
      
  

    }
  },
  methods: {
    wz1(e){
     var left= e.target.offsetLeft
     var top = e.target.offsetTop
     this.$store.commit('left1',left)
     this.$store.commit('top1',top)
     var left1=this.$store.state.left1
var top1=this.$store.state.top1
     e.target.style.left=left1
     e.target.style.top=top1
    },
    wz2(e){
     var left= e.target.offsetLeft
     var top = e.target.offsetTop
     this.$store.commit('left2',left)
     this.$store.commit('top2',top)
     var left2=this.$store.state.left2
var top2=this.$store.state.top2
     e.target.style.left=left2
     e.target.style.top=top2
    },
    wz3(e){
     var left= e.target.offsetLeft
     var top = e.target.offsetTop
     this.$store.commit('left3',left)
     this.$store.commit('top3',top)
     var left3=this.$store.state.left3
var top3=this.$store.state.top3
     e.target.style.left=left3
     e.target.style.top=top3
    },
    wz4(e){
     var left= e.target.offsetLeft
     var top = e.target.offsetTop
     this.$store.commit('left4',left)
     this.$store.commit('top4',top)
     var left4=this.$store.state.left4
var top4=this.$store.state.top4
     e.target.style.left=left4
     e.target.style.top=top4
    },
    wz5(e){
     var left= e.target.offsetLeft
     var top = e.target.offsetTop
     this.$store.commit('left5',left)
     this.$store.commit('top5',top)
     var left5=this.$store.state.left5
var top5=this.$store.state.top5
     e.target.style.left=left5
     e.target.style.top=top5
    },
    remove1(i){
      this.list1.splice(i,1)

 localStorage.setItem('list1',JSON.stringify(this.list1))
    },
     remove2(i){
      this.list2.splice(i,1)

 localStorage.setItem('list2',JSON.stringify(this.list2))
    },
     remove3(i){
      this.list3.splice(i,1)

 localStorage.setItem('list3',JSON.stringify(this.list3))
    },
     remove4(i){
      this.list4.splice(i,1)

 localStorage.setItem('list4',JSON.stringify(this.list4))
    },
     remove5(i){
      this.list5.splice(i,1)

 localStorage.setItem('list5',JSON.stringify(this.list5))
    },
    xy(){
      if(this.list1.length+this.list2.length+this.list3.length+this.list4.length+this.list5.length>=5){
        alert('不能大于五条')
        return
      }else{
if(this.show1==true){
 this.list1.push({
         text:this.text,
        fel:'show1'
      })
        localStorage.setItem('list1',JSON.stringify(this.list1))

      }
         if(this.show2==true){
 this.list2.push({
         text:this.text,
        fel:'show2'
      })
        localStorage.setItem('list2',JSON.stringify(this.list2))

      }
         if(this.show3==true){
 this.list3.push({
         text:this.text,
        fel:'show3'
      })
        localStorage.setItem('list3',JSON.stringify(this.list3))

      }
         if(this.show4==true){
 this.list4.push({
         text:this.text,
        fel:'show4'
      })
        localStorage.setItem('list4',JSON.stringify(this.list4))

      }
         if(this.show5==true){
 this.list5.push({
         text:this.text,
        fel:'show5'
      })
        localStorage.setItem('list5',JSON.stringify(this.list5))
      }

    
     

       this.show1=false
      this.show2=false
      this.show3=false
      this.show4=false
      this.show5=false
      this.fel=true
this.text=''
     
       }

    },
    pa1(e){
      if(this.text.length>0){
  this.show1=true
      this.show2=false
      this.show3=false
      this.show4=false
      this.show5=false
      this.fel=false
      }
    

    },
     pa2(e){
      if(this.text.length>0){
      
    this.show1=false
      this.show2=true
      this.show3=false
      this.show4=false
      this.show5=false
      this.fel=false

      }
    },
     pa3(e){
      if(this.text.length>0){
  
 this.show1=false
      this.show2=false
      this.show3=true
      this.show4=false
      this.show5=false
      this.fel=false

     }
    },
     pa4(e){
      if(this.text.length>0){

  this.show1=false
      this.show2=false
      this.show3=false
      this.show4=true
      this.show5=false
      this.fel=false

     }
    },
     pa5(e){
      if(this.text.length>0){

 this.show1=false
      this.show2=false
      this.show3=false
      this.show4=false
      this.show5=true
      this.fel=false

      }
    }

  },
  mounted() {

  },
  components: {

  }
}
</script>

<style lang='scss'>
.ll1,.ll2,.ll3,.ll4,.ll5{
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  span{
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: wheat;

  }
}
.ll1{
  position: absolute;
  left: 60px;
  top: 250px;


}
.ll2{
  position: absolute;
  left: 58px;
  top: 220px;
  background-color: blue !important;
}
.ll3{
   position: absolute;
  left: 68px;
  top: 210px;
  background-color: rgb(0, 0, 0) !important;
  color: aliceblue;
}
.ll4{
  position: absolute;
  left: 78px;
  top: 200px;
  background-color: pink !important;
}
.ll5{
   position: absolute;
  left: 66px;
  top: 254px;
  background-color: yellow !important;
}
.dp{
  border: 4px solid tomato;
}
.header2{
  width: 100%;
  height: 60px;
  background-color: palegreen;
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    margin: 0 20px;
  }
}
.in{
  width: 300px;
  height: 40px;
  margin-left: 15%;
  margin-top: 20px;

 
}
.li{
  width: 60px;
  height: 60px;
  border-radius:50% ;
}
.uu{
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  li:nth-child(1){
    background-color: red;
  }
  li:nth-child(2){
    background-color: blue;
  }
  li:nth-child(3){
    background-color: black;
  }
  li:nth-child(4){
    background-color: pink;
  }
  li:nth-child(5){
    background-color: yellow;
  }
}
.butt{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

</style>
